<template>
	<div>
		<div class="find">
			关注资产变化 详解房产资讯
		</div>
		<div>
			<div class="find-1" v-for="(item,index) in zixun">
				<div class="find-2">
					{{item.title}}
				</div>
				<div class="find-3">
					<router-link to="/xiangqing/xiangqing"><img :src="item.imgSrc" /></router-link>
				</div>
				<div class="find-4">
					{{item.title2}}
				</div>
			</div>
		</div>
		<div class="find-5">
			<div class="find5-left">
				<router-link to="/xiangqing/xiangqing">
				<div class="find-shang">一周热门问答 | 北京没房有贷款记录 税费算第几套？</div>
				</router-link>
				<div class="find-xia">
					<span class="left">帮助</span>
					<span class="right">专题</span>
				</div>
			</div>
			<div class="find5-right">
				<div class="find-tu">
					<img src="../../../static/img/find/mei2.jpg" />
				</div>
			</div>
		</div>
		<div class="find-1" v-for="(item,index) in zixun2">
			<div class="find-2">
				{{item.title}}
			</div>
			<div class="find-3">
				<router-link to="/xiangqing/xiangqing"><img :src="item.imgSrc" /></router-link>
			</div>
			<div class="find-4">
				{{item.title2}}
			</div>
		</div>
			<div class="find-5">
			<div class="find5-left">
				<router-link to="/xiangqing/xiangqing">
				<div class="find-shang">一周热门问答 | 北京没房有贷款记录 税费算第几套？</div>
				</router-link >
				<div class="find-xia">
					<span class="left">帮助</span>
					<span class="right">专题</span>
				</div>
			</div>
			<div class="find5-right">
				<div class="find-tu">
					<img src="../../../static/img/find/mei2.jpg" />
				</div>
			</div>
		</div>
		<div class="find-1" v-for="(item,index) in zixun2">
			<div class="find-2">
				{{item.title}}
			</div>
			<div class="find-3">
				<router-link to="/xiangqing/xiangqing"><img :src="item.imgSrc" /></router-link>
			</div>
			<div class="find-4">
				{{item.title2}}
			</div>
		</div>
		<div class="find-5">
			<div class="find5-left">
				<router-link to="/xiangqing/xiangqing">
				<div class="find-shang">一周热门问答 | 北京没房有贷款记录 税费算第几套？</div>
				</router-link >
				<div class="find-xia">
					<span class="left">帮助</span>
					<span class="right">专题</span>
				</div>
			</div>
			<div class="find5-right">
				<div class="find-tu">
					<img src="../../../static/img/find/mei2.jpg" />
				</div>
			</div>
		</div>
		<div class="find-1" v-for="(item,index) in zixun3">
			<div class="find-2">
				{{item.title}}
			</div>
			<div class="find-3">
				<router-link to="/xiangqing/xiangqing"><img :src="item.imgSrc" /></router-link>
			</div>
			<div class="find-4">
				{{item.title2}}
			</div>
		</div>
		<div class="kan"></div>
	</div>
</template>

<script>
	export default {
		name: 'find',
		data() {
			return {
				zixun: [
					{
					title: "每日播报 | 抵扣后个人税为零不影响在京购房",
					tu: "./static/img/find/mei1.jpg",
					title2: "北京城市日报"
				  }, {
					title: "每日播报 | 抵扣后个人税为零不影响在京购房",
					tu: "./static/img/find/x8.jpg",
					title2: "北京城市日报"
				  },
				],
				zixun2: [
					{
					title: "每日播报 | 抵扣后个人税为零不影响在京购房",
					tu: "./static/img/find/mei1.jpg",
					title2: "北京城市日报"
				  }
				],
				zixun3: [
					{
					// title: "每日播报 | 抵扣后个人税为零不影响在京购房",
					// tu: "./static/img/find/x1.jpg",
					// title2: "北京城市日报"
				  },
				   
				],
			}
		},
		 mounted() {
			this.$ajax({
					method: 'post',
					url: '/housing/find'
				}).then((res)=> {
					this.zixun3=res.data;
					this.zixun=res.data;
					this.zixun2=res.data;
				})
				.catch((err)=> {
					console.log(err)
				});
		},

	}
</script>

<style scoped>
	.find {
		width: 7.5rem;
		height: 1.2rem;
		line-height: 1.2rem;
		font-size: 16px;
		background: white;
		padding: 0rem 0.3rem;
		font-weight:bold;
	}

	.find-1 {
		width: 7.5rem;
		height: 5.55rem;
	}

	.find-2 {
		width: 7.5rem;
		height: 0.87rem;
		line-height: 0.87rem;
		padding: 0rem 0.5rem;
		font-size: 14px;
	}
	.find-3 {
		width: 7.5rem;
		height: 4.07rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.find-3>a>img {
		width: 6.94rem;
		height: 3.89rem;
	}
	.find-4 {
		width: 7.5rem;
		height: 0.44rem;
		line-height: 0.44rem;
		padding: 0rem 0.3rem;
		color: gray;
		font-size: 12px;
	}
	.find-5{
		width: 7.5rem;
		height: 2rem;
		display: flex;
        margin-top: 0.2rem;
	}
	.find5-left{
		width: 5rem;
		height: 2rem;
	}
	.find5-right{
		width: 2.5rem;
		height: 2rem;	
	}
	.find-shang{
		width:5rem ;
		height: 1.35rem;
		font-size: 14px;
		color: gray;
		padding: 0.2rem 0.3rem;
	}
	.find-xia{
		width:5rem ;
		height: 0.7rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rem 0.2rem;
	}
	.find-xia>span{
		display: block;
	   	width: 0.8rem;
		height: 0.4rem;
		background: gainsboro;
		color: gray;
		font-size: 12px;
		border-radius:0.08rem;
		line-height: 0.4rem;
		text-align: center;
	}
 
  .find-tu{
	 width:2.2rem ;
	 height: 2rem; 
  }
  .find-tu>img{
    width:2.2rem ;
	height: 2rem;   
  }
   .kan{
  	  width: 7.5rem;
  	  height: 1.2rem;
  }
</style>
